<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleTree</title>
<link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/SimpleTree.js"></script>
<script type="text/javascript" src="js/ejs_production.js"></script>

<script type="text/javascript">
var renderobj=eval('({"key":"","themm":""})');
function pstree(){
    var skey=document.getElementById("searchKey").value;
    themm.key=skey;
    renderobj.key=skey;
    renderobj.themm=themm;
    var html = new EJS({url: '/views/treechildview.ejs'}).render(renderobj);
    document.getElementById("qst_tree").innerHTML=html;
    $(function(){
        $(".st_tree").SimpleTree({
                click:function(a){
                        if(!$(a).attr("hasChild")&&$(a).attr("href")!=""){
                            parent.content.location.href=$(a).attr("href");
                                }
                }
        });
    });
}
var themm=null;
$(function(){
    $.ajax({
                type: "get",//使用get方法访问后台
                dataType: "json",//返回json格式的数据
                url: "/getMenu",//要访问的后台地址
                data: "pageIndex=" + null,//要发送的数据
                success: function(msg){//msg为返回的数据，在这里做数据绑定
	                themm=msg;
	                pstree();
    			},
				error:function(event){
					alert(event)
				}
	});
});
</script>
</head>
<body>
<div>
<input type="text" id="searchKey" value='' onkeyup="pstree()"/>
</div>
<div class="st_tree" id="qst_tree">

</div>
 <div id="messages"></div>
</body>
</html>
  <script type="text/javascript">
    var webSocket =
      new WebSocket('{{.}}');

    webSocket.onerror = function(event) {
      onError(event)
    };

    webSocket.onopen = function(event) {
      onOpen(event)
    };

    webSocket.onmessage = function(event) {
      onMessage(event)
    };
	String.prototype.startWith=function(str){     
						  var reg=new RegExp("^"+str);     
						  return reg.test(this);        
	}  
	function upData(group,obj){
		if(obj.Name=="/"){
			themm=obj;
			return;
		}
		for(var i=0;group&&i<group.Childs.length;i++){
			var child=group.Childs[i];
			if(child.Name==obj.Name){
				group.Childs[i]=obj;
				return;
			}else if(obj.Name.startWith(child.Name)){
				upData(child,obj)
			}
		}
	}
    function onMessage(event) {
		try{
			upData(themm,eval('('+event.data+')'))
			//document.getElementById('messages').innerHTML ="node updated!";
			pstree();
		}catch(e){
			document.getElementById('messages').innerHTML =event.data;
		}
    }

    function onOpen(event) {
      document.getElementById('messages').innerHTML
        = 'Connection Ok!';
    }

    function onError(event) {
      //alert(event.data);
    }

    function start() {
      webSocket.send('hello');
      return false;
    }
  </script>